<template>
  <div>
    <get-phone-info v-if="isGetPhoneInfo" pageType="home" @updatePhoneInfo="initMemberInfo"></get-phone-info>
    <apply-result v-if="isApplyResult" :anchorAuth="applyStatus"></apply-result>
    <div
      v-show="isApplyForm"
      class="container anchor-bg"
      :style="'background:#403bbe url(' + fileSpace + '/images/anchor-topbg.jpg) no-repeat top'">        
        <div class="form-box font-color-6">
          <div v-show="showStyle === -2 && isPerfectionInfo">
            <!-- 个人 / 企业 切换tab-->
            <div class="tab-box flex flex-between pad-t-20 pad-l-12 pad-r-12 bg-color-white mar-b-30">
              <div
                @click="changeTab(index)"
                class="tab-item-box flex flex-center"
                v-for="(item, index) of tabName"
                :key="index"
                :class="tabIndex === index ? 'active-style': 'disactive-style'">
                <span class="font-20">{{item.name}}</span>
                <span class="icon flex flex-center">
                  <van-icon name="success" />
                </span>
              </div>
            </div>
            <div v-show="tabIndex === 0">
              <!-- 身份证信息 -->
              <div class="pad-l-15 pad-r-15">
                <div>
                  <span class="font-20 font-color-3 font-w">身份证信息</span>
                </div>
                <div class="font-color-9 font-12 mar-t-5">
                  <span>请确保身份证边框完整、图像清晰、光线均匀</span>
                </div>
                <div class="flex flex-between mar-t-15">
                  <div class="upload-box flex-center flex" @click="clickUpload('userImgOne')">
                    <upload-image
                      ref="userImgOne"
                      text="身份证正面照"
                      :imgSrc="params.memberRoleAuthority.userImgOne"
                      @uploadPerSuccess="userImgOneSuccess"></upload-image>
                  </div>
                  <div class="upload-box flex-center flex" @click="clickUpload('userImgTwo')">
                    <upload-image
                      ref="userImgTwo"
                      text="身份证反面照"
                      :imgSrc="params.memberRoleAuthority.userImgTwo"
                      @uploadPerSuccess="userImgTwoSuccess"></upload-image>
                  </div>
                </div>
                <div class="mar-t-20 font-color-9 font-12">*请务必上传您本人的身份找照片，提现账号需要和注册身份证绑定，否则将无法提现。 </div>
              </div>
              <div class="mar-t-20">
                <van-field
                  :value="params.memberRoleAuthority.userName"
                  @change="inputBlur('memberRoleAuthority.userName', 'userNamePerVerify', $event)"
                  :error="userNamePerVerify"
                  label="姓名"
                  placeholder="请输入姓名"
                  :maxlength=5
                  clearable
                  required/>
                <van-field
                  :value="params.memberRoleAuthority.userIdCode"
                  @change="inputBlur('memberRoleAuthority.userIdCode', 'userIdCodePerVerify', $event)"
                  :error="userIdCodePerVerify"
                  label="身份证号"
                  placeholder="请输入身份证号"
                  required
                  clearable
                  class="border-b-no"/>
              </div>
            </div>
            <div v-show="tabIndex === 1" class="perfect-info">
              <!-- 企业信息 -->
              <div class="pad-l-15 pad-r-15">
                <div>
                  <span class="font-20 font-color-3 font-w">企业信息</span>
                </div>
                <div class="font-color-9 font-12 mar-t-5">
                  <span>请确保公司证件照边框完整、图像清晰、光线均匀</span>
                </div>
                <div class="flex flex-between mar-t-15">
                  <div class="upload-box flex-center flex" @click="clickUpload('bizImgOne')">
                    <upload-image
                      ref="bizImgOne"
                      text="上传营业执照"
                      :imgSrc="params.memberRoleAuthority.bizImgOne"
                      @uploadPerSuccess="bizImgOneSuccess"></upload-image>
                  </div>
                  <div class="upload-box flex-center flex" @click="clickUpload('bizImgTwo')">
                    <upload-image
                      ref="bizImgTwo"
                      text="上传开户信息"
                      :imgSrc="params.memberRoleAuthority.bizImgTwo"
                      @uploadPerSuccess="bizImgTwoSuccess"></upload-image>
                  </div>
                </div>
              </div>
              <div class="mar-t-20">
                <van-field
                  :value="params.memberRoleAuthority.bizName"
                  @change="inputBlur('memberRoleAuthority.bizName', 'bizNamePerVerify', $event)"
                  :error="bizNamePerVerify"
                  label="公司名称"
                  placeholder="请输入公司名称"
                  clearable
                  required/>
                <van-field
                  :value="params.memberRoleAuthority.bizIdCode"
                  @change="inputBlur('memberRoleAuthority.bizIdCode', 'bizIdCodePerVerify', $event)"
                  :error="bizIdCodePerVerify"
                  label="社会信用代码"
                  placeholder="请输入社会信用代码"
                  required
                  clearable
                  class="border-b-no"/>
              </div>
            </div>
            <div class="confirm-btn font-18 font-w" @click="nextStep">下一步</div>
          </div>
          <div v-show="showStyle === -1">
            <ul class="auth-box">
              <li class="flex v-align-c">
                <label>头像昵称</label>
                <div class="flex-item">
                  <div class="flex v-align-c">
                    <img
                      v-if="fileSpace"
                      class="avatar-img mar-r-8"
                      :src="customerId ? memberInfo.avatar : fileSpace + '/images/default-avatar.png'"
                      alt="">
                    <div class="font-16">{{ memberInfo.nickname }}</div>
                  </div>
                </div>
              </li>
              <li class="flex v-align-c">
                <label>手机号</label>
                <div v-if="memberInfo.phone" class="flex-item">{{ memberInfo.phone }}</div>
                <div v-else class="flex-item">
                  <div class="get-phone-btn" @click="getPhoneEls">一键授权</div>
                </div>
              </li>
            </ul>
            <p class="font-11 font-color-9 mar-t-11 pad-l-12 pad-r-12">注：填写账号ID一经审核通过将无法修改，若填写信息有误产生</p>
            <p class="font-11 font-color-9 mar-b-11 mar-l-4 pad-l-30 pad-r-12">损失概不负责。</p>
            <div class="plant-box">
              <ul class="sel-tab flex v-align-c pad-r-12">
                <li class="font-16 font-color-6 width-50">平台</li>
                <li
                  v-for="(item, index) in plantData" :key="index" @click="selPlant(item)"
                  class="plant-item flex-item plant-1" :class="'plant-' + item.type">
                  <div class="flex flex-center" :class="item.show ? 'active' : ''">
                    <span :style="'background:url(' + fileSpace + '/images/icon-plants.png) no-repeat'"></span>
                    <img class="width-11 height-8 selected-icon" v-if="fileSpace && item.show " :src="fileSpace + '/images/icon-selected1.png'" alt="">
                  </div>
                </li>
              </ul>
              <div class="form-main">
                <!-- <div v-for="(itemPlant, indexPlant) in plantData" :key="indexPlant"> -->
                <div>
                  <ul v-show="wxPlant" class="pad-b-20">
                    <li>
                      <div class="flex v-align-c">
                        <label>微信号</label>
                        <div class="flex-item">
                          <van-field
                            :value="wechatForm.infoNo"
                            @change="inputBlur('wechatForm', 'wechatFormPerVerify', $event)"
                            :error="wechatFormPerVerify"
                            placeholder="请输入微信号"
                            clearable
                            required/>
                          <!-- <input type="text" placeholder="请输入微信号" v-model="wechatForm.infoNo"> -->
                        </div>
                        <div class="width-20">
                        </div>
                      </div>
                      <div class="form-tips-t">
                        <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：填写正确的微信号否则无法在小程序</p>
                        <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">直播中带货</p>
                      </div>
                    </li>
                    <li>
                      <div class="flex">
                        <label>截图证明</label>
                        <div class="flex-item" @click="clickUpload('wxImg')">
                          <upload-img
                            ref="wxImg"
                            @upLoadImgSuccess="wxImgSuccess"
                            @uploadImgDelete="wxImgDelete"
                            :imgSrc="wechatForm.imgFiles"
                            :count=2></upload-img>
                        </div>
                      </div>
                      <div class="form-tips-t">
                        <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：上传微信主页的截图证明(最多2张</p>
                        <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">每张不能超过5M)</p>
                      </div>
                    </li>
                  </ul>
                  <div v-show="dyPlant">
                    <div v-show="douYinStep === 1">
                      <div v-show="douyinLayer" class="douyin-layer">
                        <img
                          @click="douyinLayer = false"
                          class="pic-douyin"
                          src="https://veekrayimg.joinsun.vip/images/pic-douyin-1.jpg"/>
                        <div class="douyin-layer-bg" @click="douyinLayer = false"></div>
                      </div>
                      <ul class="pad-b-20">
                        <li>
                          <div class="flex v-align-c">                          
                            <label>抖音UID</label>
                            <div class="flex-item">
                              <div class="flex v-align-c">
                                <div class="width-130">
                                  <van-field
                                    :value="douYinForm.infoNo"
                                    @change="inputBlur('douYinForm', 'douYinFormPerVerify', $event)"
                                    :error="douYinFormPerVerify"
                                    placeholder="请输入抖音UID"
                                    clearable
                                    required/>
                                </div>
                                <!-- <input type="text" class="width-120" placeholder="请输入抖音UID" v-model="douYinForm.infoNo"> -->
                                <div class="flex v-align-c" @click="douyinLayer = true">
                                  <img
                                    v-if="fileSpace"
                                    class="width-17 height-17 mar-l-10 mar-r-4"
                                    :src="fileSpace + '/images/icon-ques.png'"
                                    alt="">
                                  <div class="font-12 font-color-9 mar-l-3">说明</div>
                                </div>
                              </div>
                            </div>
                            <div class="width-20">
                            </div>
                          </div>
                          <div class="form-tips-t">
                            <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：填写正确的抖音UID否则无法在小程序</p>
                            <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">直播中带货</p>
                          </div>
                        </li>
                        <li>
                          <div class="flex">
                            <label>截图证明</label>
                            <div class="flex-item" @click="clickUpload('dyImg')">
                              <upload-img
                                ref="dyImg"
                                @upLoadImgSuccess="dyImgSuccess"
                                @uploadImgDelete="dyImgDelete"
                                :imgSrc="douYinForm.imgFiles"
                                :count=2></upload-img>
                            </div>
                          </div>
                          <div class="form-tips-t">
                            <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：上传抖音主页的截图证明(最多2张</p>
                            <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">每张不能超过5M)</p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <ul v-show="ksPlant">
                    <li>
                      <div class="flex v-align-c">
                        <label>快手号</label>
                        <div class="flex-item">
                          <van-field
                            :value="kuaiShouForm.infoNo"
                            @change="inputBlur('kuaiShouForm', 'kuaiShouFormPerVerify', $event)"
                            :error="kuaiShouFormPerVerify"
                            placeholder="请输入快手号"
                            clearable
                            required/>
                          <!-- <input type="text" placeholder="请输入快手号" v-model="kuaiShouForm.infoNo"> -->
                        </div>
                        <div class="width-20">
                        </div>
                      </div>
                      <div class="form-tips-t">
                        <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：填写正确的快手号否则无法在小程序</p>
                        <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">直播中带货</p>
                      </div>
                    </li>
                    <li>
                      <div class="flex">
                        <label>截图证明</label>
                        <div class="flex-item" @click="clickUpload('ksImg')">
                          <upload-img
                            ref="ksImg"
                            @upLoadImgSuccess="ksImgSuccess"
                            @uploadImgDelete="ksImgDelete"
                            :imgSrc="kuaiShouForm.imgFiles"
                            :count=2></upload-img>
                        </div>
                      </div>
                      <div class="form-tips-t">
                        <p class="font-11 font-color-9 mar-t-5 pad-l-12 pad-r-12">注：上传快手主页的截图证明(最多2张</p>
                        <p class="font-11 font-color-9 mar-l-4 pad-l-30 pad-r-12">每张不能超过5M)</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="button-box" :class="isPerfectionInfo ? 'two-btn' : ''">
              <button v-if="isPerfectionInfo" @click="showStyle = -2">上一步</button>
              <button @click="confirm">确认申请</button>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import UploadImage from './components/upload-image'
import UploadImg from './components/upload-img'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import ApplyResult from './components/ApplyResult'
import { getMemberInfo } from '@/api/home'
import { saveMemberRoleAnchorApply, getAnchorApplyList } from '@/api/personal'
import { getAuth } from '@/api/login'
export default {
  components: { UploadImage, UploadImg, ApplyResult, GetPhoneInfo },
  data() {
    return {
      customerId: '',
      userNamePerVerify: false,
      userIdCodePerVerify: false,
      bizNamePerVerify: false,
      bizIdCodePerVerify: false,
      applyQueryStatus: null,
      applyStatus: null,
      memberInfo: {},
      anchorForm: {},
      isApplyForm: true,
      isApplyResult: false,
      params: {
        memberRoleAuthority: {
          identityType: 1,
          identityName: '',
          identityNumberCode: '',
          imageList: [{
            imageUrl: '',
            imageType: '' // 图片类型：1-截图证明 2-身份证正面照 3-身份证反面照 4、营业执照 5、开户信息
          }],
          userName: '',
          userIdCode: '',
          bizName: '',
          bizIdCode: '',
          userImgOne: '',
          userImgTwo: '',
          bizImgOne: '',
          bizImgTwo: ''
        },
        memberRoleAuthorityList: []
      },
      memberRoleAuthorityObj: {
        roleAuthorityId: '',
        memberId: '',
        partnerId: '', // 合伙人id
        recruiterId: '', // 招募员id
        memberShopId: '', // 店主id
        relationPlatform: '', // 关联平台 1：微信 2：抖音 3：快手
        relationNo: '', // 关联号
        imageList: []
      },
      uploadNum: 0,
      isInitDone: false,
      submitted: false,
      plantData: [
        {name: '微信', type: 1, show: true},
        {name: '抖音', type: 2, show: false},
        {name: '快手', type: 3, show: false}
      ],
      currentPlant: null,
      wxPlant: true,
      dyPlant: false,
      ksPlant: false,
      isGetPhoneInfo: false,
      douYinStep: 1,
      douYinAuthUrl: 'https://tower.im/teams/7788112432.html',
      applyType: 6,
      partnerId: '',
      recruiterId: '',
      memberShopId: '',
      showStyle: -2,
      userType: 1,
      douyinLayer: false,
      tabIndex: 0,
      tabName: [
        {
          name: '个人',
          type: 1
        }, {
          name: '企业',
          type: 2
        }
      ],
      isPerfectionInfo: '',
      uploadImgs: [], // 准备上传的文件数组
      uploadedImgs: {}, // 上传成功的文件对象
      uploadTotalCount: 0,
      uploadedCount: 0,
      uploadErrCount: 0, // 单张图片上次出错次数
      resetType: false,
      imgSuccessFiles: [],
      // 微信参数
      wxImgFiles: [],
      wechatForm: {
        infoNo: '',
        imgFiles: [], // 微信准备上传的文件数组
        imageList: [] // 上传成功的文件对象
      },
      wxImageList: [], // 微信上传成功的文件对象
      // 抖音参数
      dyImgFiles: [],
      douYinForm: {
        infoNo: '',
        imgFiles: [], // 抖音准备上传的文件数组
        imageList: [] // 上传成功的文件对象
      },
      dyImageList: [], // 抖音上传成功的文件对象
      // 快手参数
      ksImgFiles: [],
      kuaiShouForm: {
        infoNo: '',
        imgFiles: [], // 快手准备上传的文件数组
        imageList: [] // 上传成功的文件对象
      },
      ksImageList: [] // 快手上传成功的文件对象
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  async onShow() {
    if (!this.getCurrentPage().query.inPage) {
      if (this.$store.state.previewImageFlag) return
    }
    this.isPerfectionInfo = this.$pt.getStorageSync('isPerfectionInfo')
    // console.log('isPerfectionInfo onShow', this.isPerfectionInfo)
    // this.isPerfectionInfo = 0
    if (!this.isPerfectionInfo) {
      this.showStyle = -1
    }
    await this.authCheckEls()
    await this.getMemberInfo()
    this.applyQueryStatus = Number(this.getCurrentPage().query.applyStatus)
    this.memberRoleAuthorityObj.memberId = this.customerId
    if (this.getCurrentPage().query.params) {
      let params = JSON.parse(this.getCurrentPage().query.params)
      this.applyType = params.applyType
      if (params.recruiterId) {
        this.memberRoleAuthorityObj.recruiterId = params.recruiterId
      }
      if (params.partnerId) {
        this.memberRoleAuthorityObj.partnerId = params.partnerId
      }
      if (params.memberShopId) {
        this.memberRoleAuthorityObj.memberShopId = params.memberShopId
      }
    }
    if (this.getCurrentPage().query.type) {
      let type = this.getCurrentPage().query.type
      this.wxPlant = false
      this.dyPlant = false
      this.ksPlant = false
      this.plantData = []
      if (type === '1') {
        this.wxPlant = true
        this.plantData = [
          {name: '微信', type: 1, show: true}
        ]
      }
      if (type === '2') {
        this.dyPlant = true
        this.plantData = [
          {name: '抖音', type: 2, show: true}
        ]
      }
      if (type === '3') {
        this.ksPlant = true
        this.plantData = [
          {name: '快手', type: 3, show: true}
        ]
      }
    } else {
      this.plantData = [
        {name: '微信', type: 1, show: true},
        {name: '抖音', type: 2, show: false},
        {name: '快手', type: 3, show: false}
      ]
      this.wxPlant = true
      this.dyPlant = false
      this.ksPlant = false
    }
    if (this.$pt.getStorageSync('applyDataWholesale')) {
      this.params = this.$pt.getStorageSync('applyDataWholesale')
      if (this.params.memberRoleAuthority.identityType === 2) {
        this.tabIndex = 1
      }
      if (this.params.memberRoleAuthorityList && this.params.memberRoleAuthorityList.length) {
        this.params.memberRoleAuthorityList.forEach(item => {
          if (item.relationPlatform === 1) {
            this.wechatForm.infoNo = item.relationNo
            this.wechatForm.imgFiles = item.imgFiles
            // this.plantData[0].show = true
            this.wxPlant = true
          } else {
            this.wxPlant = false
          }
          if (item.relationPlatform === 2) {
            this.douYinForm.infoNo = item.relationNo
            this.douYinForm.imgFiles = item.imgFiles
            // this.plantData[1].show = true
            this.dyPlant = true
          } else {
            this.dyPlant = false
          }
          if (item.relationPlatform === 3) {
            this.kuaiShouForm.infoNo = item.relationNo
            this.kuaiShouForm.imgFiles = item.imgFiles
            // this.plantData[2].show = true
            this.ksPlant = true
          } else {
            this.ksPlant = false
          }
        })
      }
    }
    if (!this.getCurrentPage().query.type) {
      this.initGetAnchorApplyList()
    }
  },
  mounted() {
    this.$pt.setNavigationBarTitle({
      title: '主播申请'
    })
    this.isInitDone = true
  },
  methods: {
    initGetAnchorApplyList() {
      getAnchorApplyList({
        memberId: this.customerId
      }).then((response) => {
        if (response.isError) return
        let resArrData = response.data
        if (resArrData.length) {
          let arrPlantData = []
          let plantData = []
          plantData = this.$utils.deepClone(this.plantData)
          // 除去交集，剩下的数据
          arrPlantData = plantData.filter(item => !resArrData.find(key => key.relationPlatform === item.type))
          this.plantData = []
          this.plantData = arrPlantData
          this.plantData[0].show = true
          this.plantData.forEach(itemPlant => {
            if (itemPlant.type !== 1) {
              this.wxPlant = false
            }
            if (itemPlant.type !== 2) {
              this.dyPlant = false
            }
            if (itemPlant.type !== 3) {
              this.ksPlant = false
            }
          })
          if (this.plantData[0].type === 1) {
            this.wxPlant = true
          }
          if (this.plantData[0].type === 2) {
            this.dyPlant = true
          }
          if (this.plantData[0].type === 3) {
            this.ksPlant = true
          }
          // this.plantData.forEach(itemPlant => {
          //   if (itemPlant.type === 1) {
          //     this.wxPlant = true
          //   }
          //   if (itemPlant.type === 2) {
          //     this.dyPlant = true
          //   }
          //   if (itemPlant.type === 3) {
          //     this.ksPlant = true
          //   }
          // })
        }
      })
    },
    userImgOneSuccess(res) {
      // 身份证正面照成功
      this.params.memberRoleAuthority.userImgOne = res.tempFilePaths[0]
    },
    userImgTwoSuccess(res) {
      // 身份证反面照成功
      this.params.memberRoleAuthority.userImgTwo = res.tempFilePaths[0]
    },
    bizImgOneSuccess(res) {
      // 上传营业执照成功
      this.params.memberRoleAuthority.bizImgOne = res.tempFilePaths[0]
    },
    bizImgTwoSuccess(res) {
      // 上传开户信息成功
      this.params.memberRoleAuthority.bizImgTwo = res.tempFilePaths[0]
    },
    wxImgSuccess(res) {
      // 微信截图成功
      this.wxImgFiles.push(res.tempFilePaths[0])
      this.wechatForm.imgFiles = this.wxImgFiles
    },
    wxImgDelete(res) {
      // 删除微信截图成功
      this.wechatForm.imgFiles = res.files
    },
    dyImgSuccess(res) {
      // 抖音截图成功
      this.dyImgFiles.push(res.tempFilePaths[0])
      this.douYinForm.imgFiles = this.dyImgFiles
    },
    dyImgDelete(res) {
      // 删除抖音截图成功
      this.douYinForm.imgFiles = res.files
    },
    ksImgSuccess(res) {
      // 快手截图成功
      this.ksImgFiles.push(res.tempFilePaths[0])
      this.kuaiShouForm.imgFiles = this.ksImgFiles
    },
    ksImgDelete(res) {
      // 删除快手截图成功
      this.kuaiShouForm.imgFiles = res.files
    },
    clickUpload(type, e) {
      this.getCurrentPage().query.inPage = ''
      this.$store.commit('setPreviewImageFlag', true)
      this.uploadType = type
      this.resetType = true
      this.chooseImage(type)
    },
    continueUplaod() {
      // 看完案例继续上传
      this.chooseImage(this.uploadType)
    },
    chooseImage(type) {
      // 调用组件的选择图片方法
      this.$refs[type].chooseImage()
    },
    inputBlur(name, verify, event) {
      let value = event.mp.detail
      if (name.indexOf('.') !== -1) {
        let nameArr0 = name.split('.')[0]
        let nameArr1 = name.split('.')[1]
        this.params[nameArr0][nameArr1] = value
      } else if (name === 'wechatForm') {
        this.wechatForm.infoNo = value
      } else if (name === 'douYinForm') {
        this.douYinForm.infoNo = value
      } else if (name === 'kuaiShouForm') {
        this.kuaiShouForm.infoNo = value
      }
      if (value) {
        this[verify] = false
      } else {
        this[verify] = true
      }
      this.$pt.setStorageSync('applyDataWholesale', this.params)
    },
    nextStep() {
      if (this.params.memberRoleAuthority.identityType === 1) {
        if (!this.params.memberRoleAuthority.userImgOne) {
          return this.$utils.showToast({title: '身份证正面照不能为空!'})
        }
        if (!this.params.memberRoleAuthority.userImgTwo) {
          return this.$utils.showToast({title: '身份证反面照不能为空!'})
        }
        if (!this.params.memberRoleAuthority.userName) {
          this.userNamePerVerify = true
          return this.$utils.showToast({title: '姓名不能为空!'})
        }
        if (!this.params.memberRoleAuthority.userIdCode) {
          this.userIdCodePerVerify = true
          return this.$utils.showToast({title: '身份证号不能为空!'})
        }
        this.params.memberRoleAuthority.identityName = this.params.memberRoleAuthority.userName
        this.params.memberRoleAuthority.identityNumberCode = this.params.memberRoleAuthority.userIdCode
      } else {
        if (!this.params.memberRoleAuthority.bizImgOne) {
          return this.$utils.showToast({title: '上传营业执照!'})
        }
        if (!this.params.memberRoleAuthority.bizImgTwo) {
          return this.$utils.showToast({title: '上传开户信息!'})
        }
        if (!this.params.memberRoleAuthority.bizName) {
          this.bizNamePerVerify = true
          return this.$utils.showToast({title: '公司名称不能为空!'})
        }
        if (!this.params.memberRoleAuthority.bizIdCode) {
          this.bizIdCodePerVerify = true
          return this.$utils.showToast({title: '社会信用代码不能为空!'})
        }
        this.params.memberRoleAuthority.identityName = this.params.memberRoleAuthority.bizName
        this.params.memberRoleAuthority.identityNumberCode = this.params.memberRoleAuthority.bizIdCode
      }
      this.$pt.setStorageSync('applyDataWholesale', this.params)
      this.showStyle = -1
    },
    changeTab(index) {
      if (index === this.tabIndex) return
      this.tabIndex = index
      this.params.memberRoleAuthority.identityType = index + 1
    },
    getPhoneEls() {
      this.isGetPhoneInfo = false
      setTimeout(() => {
        this.isGetPhoneInfo = true
      }, 100)
    },
    async initMemberInfo() {
      this.isGetPhoneInfo = false
      await this.getMemberInfo()
    },
    selPlant(item) {
      let count = 0
      this.plantData.forEach(key => {
        if (!key.show) {
          count++
        }
      })
      if ((count !== 2) || (count === 2 && !item.show)) {
        item.show = !item.show
      }
      this.plantData.forEach(val => {
        if (val.type === 1 && val.show) {
          this.wxPlant = true
        }
        if (val.type === 1 && !val.show) {
          this.wxPlant = false
        }
        if (val.type === 2 && val.show) {
          this.dyPlant = true
        }
        if (val.type === 2 && !val.show) {
          this.dyPlant = false
        }
        if (val.type === 3 && val.show) {
          this.ksPlant = true
        }
        if (val.type === 3 && !val.show) {
          this.ksPlant = false
        }
      })
    },
    saveMemberRoleAnchorApply() {
      if (this.params.memberRoleAuthority.identityType === 1) {
        this.params.memberRoleAuthority.bizName = ''
        this.params.memberRoleAuthority.bizIdCode = ''
        this.params.memberRoleAuthority.bizImgOne = ''
        this.params.memberRoleAuthority.bizImgTwo = ''
        this.params.memberRoleAuthority.imageList = [
          {
            imageUrl: this.uploadedImgs.userImgOne,
            imageType: 2
          }, {
            imageUrl: this.uploadedImgs.userImgTwo,
            imageType: 3
          }
        ]
      } else if (this.params.memberRoleAuthority.identityType === 2) {
        this.params.memberRoleAuthority.userName = ''
        this.params.memberRoleAuthority.userIdCode = ''
        this.params.memberRoleAuthority.userImgOne = ''
        this.params.memberRoleAuthority.userImgTwo = ''
        this.params.memberRoleAuthority.imageList = [
          {
            imageUrl: this.uploadedImgs.bizImgOne,
            imageType: 4
          }, {
            imageUrl: this.uploadedImgs.bizImgTwo,
            imageType: 5
          }
        ]
      }
      if (!this.isPerfectionInfo) {
        this.params.memberRoleAuthority = {}
      }
      if (this.uploadedImgs.wxValue && this.uploadedImgs.wxValue.length) {
        // 微信上传成功后数据处理
        this.uploadedImgs.wxValue.forEach(item => {
          this.wechatForm.imageList.push({
            imageUrl: item,
            imageType: 1
          })
        })
        this.memberRoleAuthorityObj.memberId = this.customerId
        this.memberRoleAuthorityObj.relationPlatform = 1
        this.memberRoleAuthorityObj.relationNo = this.wechatForm.infoNo
        this.memberRoleAuthorityObj.imageList = this.wechatForm.imageList
        this.memberRoleAuthorityObj.imgFiles = this.wechatForm.imgFiles
        this.params.memberRoleAuthorityList.push(this.memberRoleAuthorityObj)
        this.memberRoleAuthorityObjReset()
      }
      if (this.uploadedImgs.dyValue && this.uploadedImgs.dyValue.length) {
        // 抖音上传成功后数据处理
        this.uploadedImgs.dyValue.forEach(item => {
          this.douYinForm.imageList.push({
            imageUrl: item,
            imageType: 1
          })
        })
        this.memberRoleAuthorityObj.memberId = this.customerId
        this.memberRoleAuthorityObj.relationPlatform = 2
        this.memberRoleAuthorityObj.relationNo = this.douYinForm.infoNo
        this.memberRoleAuthorityObj.imageList = this.douYinForm.imageList
        this.memberRoleAuthorityObj.imgFiles = this.douYinForm.imgFiles
        this.params.memberRoleAuthorityList.push(this.memberRoleAuthorityObj)
        this.memberRoleAuthorityObjReset()
      }
      if (this.uploadedImgs.ksValue && this.uploadedImgs.ksValue.length) {
        // 快手上传成功后数据处理
        this.uploadedImgs.ksValue.forEach(item => {
          this.kuaiShouForm.imageList.push({
            imageUrl: item,
            imageType: 1
          })
        })
        this.memberRoleAuthorityObj.memberId = this.customerId
        this.memberRoleAuthorityObj.relationPlatform = 3
        this.memberRoleAuthorityObj.relationNo = this.kuaiShouForm.infoNo
        this.memberRoleAuthorityObj.imageList = this.kuaiShouForm.imageList
        this.memberRoleAuthorityObj.imgFiles = this.kuaiShouForm.imgFiles
        this.params.memberRoleAuthorityList.push(this.memberRoleAuthorityObj)
        this.memberRoleAuthorityObjReset()
      }
      // console.log('params 00', this.params)
      // console.log('params 11', this.uploadedImgs)
      this.$pt.setStorageSync('applyDataWholesale', this.params)
      saveMemberRoleAnchorApply(this.params).then((response) => {
        if (response.isError) {
          this.params.memberRoleAuthorityList = []
          this.$pt.setStorageSync('applyDataWholesale', this.params)
          this.isInitDone = true
          this.submitted = false
          this.getMemberInfo()
          return
        }
        this.$store.commit('setPreviewImageFlag', false)
        this.$pt.removeStorageSync('applyDataWholesale')
        this.getAnchorApplyList()
      })
    },
    memberRoleAuthorityObjReset() {
      this.memberRoleAuthorityObj = {
        roleAuthorityId: '',
        memberId: this.customerId,
        partnerId: '', // 合伙人id
        recruiterId: '', // 招募员id
        memberShopId: '', // 店主id
        relationPlatform: '', // 关联平台 1：微信 2：抖音 3：快手
        relationNo: '', // 关联号
        imageList: []
      }
    },
    confirm() {
      if (!this.memberInfo.phone) return this.$utils.showToast({ title: '请先授权手机号码' })
      if (this.wxPlant) {
        if (!this.wechatForm.infoNo) return this.$utils.showToast({ title: '请输入微信号' })
        if (!this.wechatForm.imgFiles.length) return this.$utils.showToast({ title: '请选择微信截图证明' })
      }
      if (this.dyPlant) {
        if (!this.douYinForm.infoNo) return this.$utils.showToast({ title: '请输入抖音号' })
        if (!this.douYinForm.imgFiles.length) return this.$utils.showToast({ title: '请选择抖音截图证明' })
      }
      if (this.ksPlant) {
        if (!this.kuaiShouForm.infoNo) return this.$utils.showToast({ title: '请输入快手号' })
        if (!this.kuaiShouForm.imgFiles.length) return this.$utils.showToast({ title: '请选择快手截图证明' })
      }
      // 调用保存接口
      this.saveData()
    },
    saveData() {
      // 保存数据方法
      // 先处理图片上传
      let uploadImgs = [{
        name: '身份证正面照',
        key: 'userImgOne',
        src: this.params.memberRoleAuthority.userImgOne
      }, {
        name: '身份证反面照',
        key: 'userImgTwo',
        src: this.params.memberRoleAuthority.userImgTwo
      }, {
        name: '上传营业执照',
        key: 'bizImgOne',
        src: this.params.memberRoleAuthority.bizImgOne
      }, {
        name: '上传开户信息',
        key: 'bizImgTwo',
        src: this.params.memberRoleAuthority.bizImgTwo
      }]
      if (this.wechatForm.imgFiles.length) {
        this.wechatForm.imgFiles.forEach((itemImg, indexImg) => {
          uploadImgs.push({
            name: '微信截图' + indexImg,
            key: 'wxImg' + indexImg,
            value: 'wxValue',
            src: itemImg
          })
        })
      }
      if (this.douYinForm.imgFiles.length) {
        this.douYinForm.imgFiles.forEach((itemImg, indexImg) => {
          uploadImgs.push({
            name: '抖音截图' + indexImg,
            key: 'dyImg' + indexImg,
            value: 'dyValue',
            src: itemImg
          })
        })
      }
      if (this.kuaiShouForm.imgFiles.length) {
        this.kuaiShouForm.imgFiles.forEach((itemImg, indexImg) => {
          uploadImgs.push({
            name: '快手截图' + indexImg,
            key: 'ksImg' + indexImg,
            value: 'ksValue',
            src: itemImg
          })
        })
      }
      // console.log('saveData uploadImgs 00', uploadImgs)
      // console.log('saveData uploadImgs 77', this.uploadImgs)
      // 过滤src为空的元素
      this.uploadImgs = uploadImgs.filter(item => {
        // 筛选出路径不为空的且不是已上传的
        // console.log(Object.keys(this.uploadedImgs))
        let findIndex = Object.keys(this.uploadedImgs).findIndex(key => item.key === key)
        return item.src && findIndex === -1
      })
      this.uploadTotalCount = this.uploadImgs.length
      // console.log('saveData uploadImgs 11', this.uploadImgs)
      this.uploadImg()
    },
    uploadImg() {
      if (this.uploadImgs.length > 0) {
        this.$pt.showLoading({
          title: `图片上传中${this.uploadedCount}/${this.uploadTotalCount}`,
          mask: true
        })
        const uploadTask = this.$pt.uploadFile({
          url: process.env.BASE_API + '/common/uploadFiles',
          filePath: this.uploadImgs[0].src,
          name: 'files',
          success: res => {
            const result = JSON.parse(res.data)
            if (result.code === 101) {
              if (this.uploadImgs[0].value === 'wxValue') {
                this.wxImageList.push(result.data[0])
                this.uploadedImgs[this.uploadImgs[0].value] = this.wxImageList
              } else if (this.uploadImgs[0].value === 'dyValue') {
                this.dyImageList.push(result.data[0])
                this.uploadedImgs[this.uploadImgs[0].value] = this.dyImageList
              } else if (this.uploadImgs[0].value === 'ksValue') {
                this.ksImageList.push(result.data[0])
                this.uploadedImgs[this.uploadImgs[0].value] = this.ksImageList
              } else {
                this.uploadedImgs[this.uploadImgs[0].key] = result.data[0]
              }
              this.uploadImgs.shift()
              this.uploadedCount++
              this.uploadImg()
            } else {
              console.log('图片上传发生错误', result.msg)
              // 调用图片上传出错处理函数
              this.checkError(this.uploadImgs[0])
            }
          },
          fail: err => {
            console.log('上传失败', err, this.uploadImgs[0].key)
            // 调用图片上传出错处理函数
            this.checkError(this.uploadImgs[0])
          }
        })
        uploadTask.onProgressUpdate((res) => {
          console.log('上传进度', res.progress)
        })
      } else {
        // 图片全部上传完，调用申请团长接口
        this.$pt.hideLoading()
        this.saveMemberRoleAnchorApply()
      }
    },
    checkError(curUpload) {
      if (this.uploadErrCount >= 1) {
        this.uploadErrCount = 0
        this.uploadedCount = 0
        this.$pt.hideLoading()
        this.$utils.showToast({
          title: `${curUpload.name}上传出错，请重新选择图片`,
          duration: 3000
        })
        return
      }
      this.uploadErrCount++
      this.uploadImg()
    },
    getAnchorApplyList() {
      this.isApplyForm = false
      this.isApplyResult = false
      this.$utils.showToast({
        title: '加载中',
        icon: 'loading'
      })
      getAnchorApplyList({
        memberId: this.customerId
      }).then((response) => {
        if (response.isError) return
        // 取提交数据中，第一条平台类型，然后保存提交后或者这第一条平台类型的主播审核状态
        let applyFirstPlat = this.params.memberRoleAuthorityList[0].relationPlatform
        this.applyStatus = 0
        if (response.data.length) {
          response.data.forEach(item => {
            if (item.relationPlatform === applyFirstPlat) {
              this.applyStatus = item.applyStatus
            }
          })
        } else {
          this.applyStatus = -1
        }
        // '申请状态: -1 未申请;  0 待审核;  1 审核通过;  2审核未通过;'
        if (this.applyStatus === -1) {
          // 未申请主播
          this.$pt.hideToast()
          this.isApplyForm = true
          this.$pt.setNavigationBarTitle({
            title: '主播申请'
          })
        } else {
          this.isApplyResult = false
          setTimeout(() => {
            this.$pt.hideToast()
            this.isApplyResult = true
          }, 100)
        }
      })
    },
    authCheckEls() {
      return new Promise((resolve, reject) => {
        let that = this
        this.$pt.login({
          success(res) {
            if (res.code) {
              getAuth(res.code).then((response) => {
                if (response.data.customerId) {
                  that.customerId = response.data.customerId
                }
                resolve(true)
              }).catch(() => {
              })
            }
          }
        })
      })
    },
    getMemberInfo() {
      return new Promise((resolve, reject) => {
        getMemberInfo(this.customerId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
          resolve(true)
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  min-height: calc(100vh - 144px);
  .perfect-info{
    /deep/ .van-cell__title{
      min-width: 110px!important;
      max-width: 110px!important;
    }
  }
  .tab-box {
    .tab-item-box {
      position: relative;
      width: 155px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      .icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 18px;
      }
    }
    .active-style {
      border: 1px solid #7427FF;
      color:#7427FF;
      .icon {
        background: #7427FF;
        border-radius: 0px 8px 0px 8px;
        color: #fff;
      }
    }
    .disactive-style {
      border: 1px solid #EEEEEE;
      color: #333333;
      .icon {
        background: #EEEEEE;
        border-radius: 0px 8px 0px 8px;
        color: #B5B5B5;
      }
    }
  }
  .text-style {
    color: #7427FF;
  }
  .upload-box {
    width: 153px;
    height: 99px;
    border: 1px dashed #9C9C9C;
    border-radius: 5px;
    .plus-icon {
      width: 29px;
      height: 29px;
      background: #7427FF;
      border-radius: 50%;
      color: #fff;
    }
  }
  &.anchor-bg{
    background-size: 375px 207px!important;
    padding-top: 144px;
    padding-bottom: 20px;
  }
  .douyin-layer{
    position: fixed;
    left: 0;
    top: 30%;
    width: 100%;
    height: 100%;
    z-index: 10;
    .douyin-layer-bg{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
      background: rgba(0, 0, 0, 0.5);
    }
  }
  .pic-douyin{
    width: 375px;
    height: 222px;
    position: relative;
    z-index: 12;
    border: #fff 3px solid;
    box-sizing: border-box;
  }
  .button-box{
    &.two-btn{
      text-align: center;
      // padding-left: 14px;
      button{
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
      }
      button:first-child{
        width: 115px;
        background: #fffbdd;
        color: #333333;
        border: #fff4a2 1px solid;        
      }
      button:last-child{
        width: 195px;
        margin-right: 0;
      }
    }
    button{
      width: 300px;
      height: 44px;
      line-height: 44px;
      background: #ffe100;
      margin: 0 auto;
      color: #333333;
      font-size: 18px;
      font-weight: bold;
      border-radius: 40px;
      &::after{
        border: unset;
      }
    }
  }
  .form-box{
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 15px;
    padding-bottom: 32px;
    ul.auth-box{
      li{
        border-bottom: #fafafa 2px solid;
        padding: 10px 12px;
        label{
          margin-right: 9px;          
        }
        .avatar-img{
          width: 30px;
          height: 30px;
          border-radius: 50px;
        }
        .get-phone-btn{
          background: #f1f0ff;
          color: #736DFF;
          border-radius: 50px;
          font-size: 12px;
          padding: 0 8px;
          height: 24px;
          line-height: 24px;
          float: right;
        }
      }
    }
    .plant-box{
      border-top: #f7f9fb 5px solid;
      padding: 10px 12px;
      .form-main{
        background: #f7f9fb;
        border-radius: 10px;
        padding: 17px 10px;
        margin-top: 15px;
        /deep/ .van-cell {
          padding: 5px 10px 5px 15px;
          border-radius: 5px;
        }
        .steps-txt{
          font-size: 16px;
          padding: 0 6px 14px 6px;
        }
        .steps-1{
          p{
            color: #999;
            font-size: 13px;
            margin-left: 29px;
            line-height: 1.6;
          }
          input{
            color: #333;
            background: #f7f9fb;
            border:#e9eaea 1px solid;
            border-radius: 5px;
            width: 218px;
            padding: 0 10px;
            margin: 16px auto 18px auto;
            font-size: 13px;
          }
          .copy-btn{
            background: #f1f0ff;
            color: #7427FF;
            font-size: 13px;
            padding: 0 32px;
            height: 34px;
            border-radius: 50px;
          }
        }
        li{
          padding-bottom: 15px;
          &:last-child{
            padding-bottom: 0;
          }
          label{
            font-size: 16px;
            margin-right: 10px;
            min-width: 70px;
            text-align: right;
            display: block;
          }
          input{
            background: #fff;
            border-radius: 5px;
            padding: 0 9px;
            font-size: 13px;
          }
          .form-tips-t{
            padding-left: 70px;
          }
        }
      }
      .sel-tab{
        .plant-item{          
          .active{
            background: #f7f9fb;
            border-radius: 5px;
            .selected-icon{
              position: absolute;
              right: 4px;
              bottom: 4px;
              z-index: 20;
            }
          }
          &.plant-2{
            div{
              span{
                background-position: -24px 0!important;
              }
            }
          }
          &.plant-3{
            div{
              span{
                background-position: -48px 0!important;
              }
            }
          }
          div{
            height: 48px;
            width: 48px;
            position: relative;
            z-index: 10;
            span{
              height: 22px;
              width: 22px;
              display: block;
              background-size: 70px 22px!important;
            }
          }
        }
      }
    }
    .confirm-btn{
      background: #ffe100;
      color: #333;
      border-radius: 100px;
      text-align: center;
      height: 44px;
      line-height: 44px;
      margin: 16px 25px 0 25px;
    }
  }
}
</style>
